<script setup>
// *****这里有一个教练列没有实现

import reserveApi from '@/api/reserveApi'
import memberApi from '@/api/memberApi'
import courseApi from '@/api/courseApi'
import { reactive,ref } from "vue";
import {ElMessage,ElMessageBox} from 'element-plus'

const pageInfo = ref({
    page:1,
    limit:10,
    total:0
})

/*1.分页查询*/
//预约列表
const reserves = ref([])
loadReserves()
//加载预约列表
function loadReserves() {
    reserveApi.search(pageInfo.value).then(result=>{
        console.log("预约列表：",result)
        reserves.value = result.data.list
        pageInfo.value.total = result.data.total
    }).catch(error=>{
        // ElMessage.error('服务器忙，请稍后再试')
    })
}

/*2.关键词查询*/
//会员列表
const members = ref([])
loadMember()
function loadMember() {
    memberApi.search().then(result=>{
        console.log("会员列表：",result)
        members.value = result.data
    })
}

//课程列表
const courses = ref([])
loadCourse()
function loadCourse() {
    courseApi.search().then(result=>{
        console.log("课程列表：",result)
        courses.value = result.data
    })
}

//条件查询
function onSearch() {
    pageInfo.value.page = 1
    loadReserves()
}

/*3.添加弹框*/
const addVisible = ref(false)
const addReserve = ref({})
//显示添加预约弹框
function showAdd() {
    addVisible.value = true
}
// 立即预约
function handleAdd() {
    //调用reserveApi中的添加方法
    reserveApi.add(addReserve.value).then(result=>{
        if (result.code == 200) {
            ElMessage.success('预约信息添加成功')
            //关闭添加弹出
            addVisible.value = false
            //清空添加弹框的旧值
            addReserve.value = {}
            //重新加载
            loadReserves()
        } else {
            ElMessage.error(result.msg)
            //关闭添加弹出
            addVisible.value = false
            //清空添加弹框的旧值
            addReserve.value = {}
        }
    }).catch(error=>{
        ElMessage.error("服务器忙，请稍后再试")
        //关闭添加弹框
        addReserve.value = false
    })
}

/*4.编辑弹框*/
const editVisible = ref(false)
const editReserve = ref({})
// 修改预约信息
function showEdit(row){
    console.log("编辑预约：",row)
    editVisible.value = true
    editReserve.value = JSON.parse(JSON.stringify(row))
}
//修改预约信息
function handleEdit() {
    reserveApi.edit(editReserve.value).then(result=>{
        if(result.code == 200) {
            //修改成功
            ElMessage.success('修改成功')
            //关闭编辑框
            editVisible.value = false;
            //重新加载数据
            loadReserves()
        } else {
            //修改失败
            ElMessage.error(result.msg)
            //关闭编辑框
            editVisible.value = false;
        }
    }).catch(error=>{
        ElMessage.error('服务器忙，请稍后再试')
        //关闭编辑框
        editVisible.value = false
    })
}

//取消预约
function handleCancel(row) {
    editReserve.value = JSON.parse(JSON.stringify(row))
    ElMessageBox.confirm(
    '您确定要取消预约吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info',
    }
  )
    .then(() => {
      editReserve.value = JSON.parse(JSON.stringify(row))
      console.log("状态修改前：",editReserve.value)
      //取消预约，要将参数status的值改成0
      editReserve.value.status = 0
      console.log("状态修改后：",editReserve.value)
      reserveApi.edit(editReserve.value).then(result=>{
        if (result.code == 200) {
            //修改成功
            ElMessage.success('修改成功')
            //重新加载数据
            loadReserves()
        } else {
            //修改失败
            ElMessage.error(result.msg)
        }
      }).catch(error=>{
        ElMessage.error('服务器忙，请稍后再试')
      })
    })
    .catch(() => {
      //取消按钮，什么也不执行
    })
}

//格式化状态 0：已取消 1：已预约 2：上课中 3：已完课
function fmtStatus(row,column,cellValue,index) {
    return ['已取消','已预约','上课中','已完课'][row.status];
}
</script>

<template>
    <div class="content">
        <el-form :model="pageInfo" :inline="true">
            <el-form-item label="会员" :label-width="60">
                <el-select
                    v-model="pageInfo.memberId"
                    filterable
                    placeholder="请选择会员"
                    style="width: 240px"
                    clearable
                >
                    <el-option
                        v-for="item in members"
                        :key="item.id"
                        :label="item.name + '-' + item.phone"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="课程" :label-width="60">
                <el-select
                    v-model="pageInfo.courseId"
                    filterable
                    placeholder="请选择课程"
                    style="width: 240px"
                    clearable
                >
                    <el-option
                        v-for="item in courses"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch"><el-icon><Search></Search></el-icon></el-button>
            </el-form-item>
        </el-form>
        <div class="bar">
            <el-button type="success" @click="showAdd" >添加预约</el-button>
        </div>
        <el-table :data="reserves" :stripe="true" :border="true" style="width: 100%">
            <el-table-column prop="id" label="ID" width="60" />
            <el-table-column prop="member.name" label="会员"  width="200"/>
            <el-table-column prop="course.name" label="课程" width="180" />
            <!-- <el-table-column prop="course.coach.name" label="教练" /> -->
            <el-table-column prop="course.time" label="时间" width="180" />
            <el-table-column prop="course.length" label="时长"  width="140"/>
            <el-table-column prop="reserveTime" label="预约时间" width="180" />
            <el-table-column prop="score" label="评分"  width="60"/>
            <el-table-column prop="comment" label="评语" width="180" />
            <el-table-column prop="commentTime" label="评价时间" width="180" />
            <el-table-column prop="status" label="状态" width="80" :formatter="fmtStatus"/>
            <el-table-column label="操作" width="280">
                <template #default="scope">
                    <el-button size="small" type="warning" v-if="scope.row.status==1"
                        @click="handleCancel(scope.row)">取消预约</el-button> 
                    <el-button size="small" type="success"
                        @click="showEdit(scope.row)">编辑</el-button> 
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="page" v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.limit"
            :total="pageInfo.total" :page-sizes="[10, 20, 50, 100]" :background="true"
            layout="total, sizes, prev, pager, next, jumper" @change="loadReserves" />
    </div>

    <!-- 添加的弹窗 -->
    <el-dialog v-model="addVisible" title="创建新预约" width="500">
        <el-form :model="addReserve">
            <el-form-item label="会员" :label-width="60">
                <el-select
                    v-model="addReserve.memberId"
                    filterable
                    placeholder="请选择会员"
                    style="width: 240px"
                >
                    <el-option
                    v-for="item in members"
                    :key="item.id"
                    :label="item.name + '-' + item.phone"
                    :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="课程" :label-width="60">
                <el-select
                    v-model="addReserve.courseId"
                    filterable
                    placeholder="请选择课程"
                    style="width: 240px"
                >
                    <el-option
                    v-for="item in courses"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAdd">
                    立即预约
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 编辑的弹窗 -->
    <el-dialog v-model="editVisible" title="编辑预约" width="500">
        <el-form :model="editReserve">
            <el-form-item label="会员" :label-width="60">
                <el-select
                    v-model="editReserve.memberId"
                    filterable
                    placeholder="请选择会员"
                    style="width: 240px"
                >
                    <el-option
                    v-for="item in members"
                    :key="item.id"
                    :label="item.name + '-' + item.phone"
                    :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="课程" :label-width="60">
                <el-select
                    v-model="editReserve.courseId"
                    filterable
                    placeholder="请选择课程"
                    style="width: 240px"
                >
                    <el-option
                    v-for="item in courses"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="editVisible = false">取消</el-button>
                <el-button type="primary" @click="handleEdit">
                    修改预约
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style>
</style>